/* 自定义样式 */
.nav-bar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.nav-bar ul li {
    padding: 10px 15px;
    cursor: pointer;
    background-color: white; /* 默认背景颜色 */
    color: black; /* 默认字体颜色 */
}
.nav-bar ul li a {
    text-decoration: none;
    color: inherit; /* 继承父元素的颜色 */
    display: block; /* 让a标签占据整个li区域 */
}

/* 定义未选中项的样式 */
.inactive-item {
    background-color: #f0f0f0; /* 灰色背景 */
    color: black; /* 黑色字体 */
}

/* 定义选中项的样式 */
.active-item {
    background-color: #add8e6 !important; /* 浅蓝色背景 */
    color: white !important; /* 白色字体 */
}

/* 顶部横条样式 */
.header {
    background-color: yellow; /* 黄色背景 */
}

/* 确保主体内容区占据剩余的视口高度 */
body {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 占据整个视口高度 */
}
.container-fluid {
    flex-grow: 1; /* 占据剩余空间 */
    overflow: hidden; /* 防止溢出 */
}
.content {
    height: 100%; /* 确保iframe占据整个内容区的高度 */
    overflow: auto; /* 如果内容超出高度则启用滚动 */
    background-color: white; /* 右侧内容区背景颜色 */
}
.nav-bar {
    background-color: #f0f0f0; /* 左侧导航栏背景颜色 */
    border-right: 1px solid #ddd; /* 添加边框以区分导航栏和内容区 */
}